<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单添加管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div align="center" class="d1">
        <div style="float: left">
          <el-button @click="goafter" type="info">返回上一级</el-button>
        </div>
        <div style="float: right">
          <el-button @click="clearForm" type="danger">清空</el-button>
        </div>
        <h3 style="color: mediumblue">订单添加界面</h3>
      </div>
      <div class="d2">
        <el-form :rules="rules" :ref="ruleForm" :model="orderAndItem.piOrder" label-width="80px">
          <el-row :gutter="100">
            <el-col :span="11">
              <el-form-item label="订单编号" prop="code">
                <el-input v-model="orderAndItem.piOrder.code" :value="this.orderAndItem.piOrder.code"
                          readonly></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="linkmanId">
                <el-select v-model="orderAndItem.piOrder.linkmanId" placeholder="请选择"
                           @change="cxLinkmanTel(orderAndItem.piOrder.linkmanId)">
                  <el-option
                    v-for="item in linkMan"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="税率" prop="linkmanTel">
                <el-input v-model="orderAndItem.piOrder.taxRate" :value="this.orderAndItem.piOrder.taxRate"
                          readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="客户" prop="customerId">
                <el-select v-model="orderAndItem.piOrder.customerId" placeholder="请选择"
                           @change="cxLinkman(orderAndItem.piOrder.customerId)">
                  <el-option
                    v-for="item in options"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机号" prop="linkmanTel">
                <el-input v-model="orderAndItem.piOrder.linkmanTel"
                          :value="this.orderAndItem.piOrder.linkmanTel"></el-input>
              </el-form-item>
              <el-form-item label="当前登录人" v-if="0">
                <el-input v-model="orderAndItem.piOrder.tbId" :value="this.orderAndItem.piOrder.tbId"
                          readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <el-button type="primary" @click="importExcel=true">导入BOM</el-button>
          <el-button type="primary" @click="importPic = true">导入图纸</el-button>
        </div>
        <div>
          <el-table
            :data="orderAndItem.piOrderItems"
            height="250"
            border
            style="width: 100%">
            <el-table-column
              type="index">
            </el-table-column>
            <el-table-column
              label="编号">
              <template slot-scope="scope">
                <el-link type="primary"
                         :href="'http://localhost:8080/order/pi-order-pic/download/'+scope.row.code+'/'+orderAndItem.piOrder.code"
                         target="_blank">{{scope.row.code}}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="num"
              label="数量">
            </el-table-column>
          </el-table>
        </div>
        <el-dialog title="导入Excel信息" width="400px" :visible.sync="importExcel">
          <el-upload
            class="upload-demo"
            drag
            :headers="auth"
            :on-success="uploadExcel"
            action="/api/order/pi-order-item/importExcel"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">上传零件Excel数据</div>
          </el-upload>
        </el-dialog>


        <el-dialog title="导入图纸信息" width="400px" :visible.sync="importPic">
          <el-upload
            class="upload-demo"
            :headers="auth"
            drag
            :action="'/api/order/pi-order-pic/importPic/'+this.orderAndItem.piOrder.code"
            :on-success="uploadPic"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-dialog>
      </div>
      <div align="center">
        <el-button type="primary" @click="addCustomer(ruleForm)">添加</el-button>
        <el-button @click="goafter">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "AddOrder",
    data() {
      return {
        ruleForm: {},
        rules: {
          customerId: [{required: true, message: '请选择客户', trigger: 'change'}],
          linkmanId: [{required: true, message: '请选择联系人', trigger: 'change'}]
        },
        options: [],
        linkMan: [],
        linkmanForm: {},
        importExcel: false,
        importPic: false,
        formLabelWidth: "120px",
        auth: {},
        orderAndItem: {
          piOrder: {
            linkmanTel: '',
            taxRate: ''
          },
          piOrderItems: [],
        },
        nowUser: {
          id: ''
        }
      }
    },
    methods: {
      goafter() {
        this.$router.go(-1)
      },
      findCode() {
        this.$http.post("/order/addOrder/resultCode", {}).then((res) => {
          if (res.data.success) {
            this.orderAndItem.piOrder.code = res.data.result
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      clearForm() {
        this.orderAndItem.piOrder = {}
        this.orderAndItem.piOrderItems = []
        this.$router.go(0)
      },
      cxCotumer() {
        this.$http.post("/information/pi-customer/cxCotumerAll", {}).then((res) => {
          if (res.data.success) {
            this.options = res.data.result
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      cxLinkman(id) {
        this.cxsv(id);
        this.$http.get("/information/pi-linkman/cxLinkmanByCustomerId/" + id).then((res) => {
          if (res.data.success) {
            this.linkMan = res.data.result
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      cxsv(id) {
        this.$http.post("/information/pi-customer/cxCotumer/" + id).then((res) => {
          if (res.data.success) {
            this.orderAndItem.piOrder.taxRate = res.data.result.taxRate
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      cxLinkmanTel(id) {
        this.$http.post("/information/pi-linkman/cxLinkMan/" + id, {}).then((res) => {
          if (res.data.success) {
            this.linkmanForm = res.data.result
            this.orderAndItem.piOrder.linkmanTel = this.linkmanForm.tel
          } else {
            this.$message.error(res.data.result.message)
          }
        })
      },
      uploadExcel(res, file) {
        if (res.success) {
          this.$message.success("导入成功")
          this.importExcel = false
          this.orderAndItem.piOrderItems = res.result
        } else {
          this.$message.error("导入失败")
        }
      },
      uploadPic(res, file) {
        if (res.success) {
          this.$message.success("导入图纸成功")
          this.importPic = false
        } else {
          this.$message.error("导入失败")
        }
      },
      addCustomer(ruleForm) {
        if (this.orderAndItem.piOrderItems.length > 0) {
          this.$refs[ruleForm].validate((valid) => {
            if (valid) {
              this.$http.post("/order/addOrder/add", this.orderAndItem).then((res) => {
                if (res.data.success) {
                  this.$message.success(res.data.message)
                  this.$router.push("/orderList")
                } else {
                  this.$message.error(res.data.message)
                }
              })
            } else {
              this.$message.error("添加失败，字段验证不通过")
              return false;
            }
          });
        }else{
          this.$message.error("请添加bom")
        }
      }
    },
    mounted() {
      this.findCode()
      this.cxCotumer()
      this.auth.token = sessionStorage.getItem("token")
      this.nowUser = JSON.parse(sessionStorage.getItem("user"))
      this.orderAndItem.piOrder.tbId = this.nowUser.id
    }
  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }
</style>
